<template>
  <div class="buy-log">
    <div class="buy-log-h4">购买记录</div>
    <div class="buy-table">
        <div class="buy-header flex">
        <div class="header-item flex">序号</div>
        <div class="header-item flex">商品名称</div>
        <div class="header-item flex">金额（元）</div>
        <div class="header-item flex" style="padding: 0 20px">订单号</div>
        <div class="header-item flex">支付方式</div>
        <div class="header-item flex">支付状态</div>
        <div class="header-item flex" style="padding: 0 20px">购买时间</div>
      </div>
      <el-form v-loading="loading">
        <div v-if="tableLength > 0">
        <div
          class="buy-body flex"
          v-for="(item, index) in tableList"
          :key="'table' + index"
        >
          <div
            class="body-item flex"
            :style="
              index == tableLength - 1 ? 'border-bottom:1px solid #4a4e59' : ''
            "
          >
            {{ index + 1 }}
          </div>
          <div
            class="body-item flex"
            :style="
              index == tableLength - 1 ? 'border-bottom:1px solid #4a4e59' : ''
            "
          >
            {{ item.shop_name }}
          </div>
          <div
            class="body-item flex"
            :style="
              index == tableLength - 1 ? 'border-bottom:1px solid #4a4e59' : ''
            "
          >
            {{ item.money }}
          </div>
          <div
            class="body-item flex"
            :style="
              index == tableLength - 1
                ? 'border-bottom:1px solid #4a4e59;padding:0 20px'
                : 'padding:0 20px'
            "
          >
            {{ item.tradeno }}
          </div>
          <div
            class="body-item flex"
            :style="
              index == tableLength - 1 ? 'border-bottom:1px solid #4a4e59' : ''
            "
          >
            {{ item.paytype }}
          </div>
          <div
              class="body-item flex"
              :style="
              index == tableLength - 1 ? 'border-bottom:1px solid #4a4e59' : ''
            "
          >
            {{ item.status == 1 ? '已支付' : '待支付' }}
          </div>
          <div
            class="body-item flex"
            :style="
              index == tableLength - 1
                ? 'border-bottom:1px solid #4a4e59;padding:0 20px'
                : 'padding:0 20px'
            "
          >
            {{ formatDate(item.datetime) }}
          </div>
        </div>
      </div>
      <div v-else class="no-data flex">暂无记录</div>
      </el-form>
    </div>
    <div class="flex">
      <div>
        总 <span class="chooseColor">{{ total }}</span> 条记录
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="pages.current"
        :page-size="pages.size"
        @current-change="currentChange"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getBuyLogList} from "../../utils/api";
import {formatTimestampToDate} from "../../utils/fileUtils";
export default {
  name: "buy-log",
  data() {
    return {
      loading:false,
      pages: {
        current: 1,
        size: 10,
      },
      total: 10,
      tableLength: 0,
      tableList: [],
    };
  },
  methods: {
    currentChange(v) {
      this.pages.current = v;
      this.handInviteList();
    },
    handInviteList(){
      this.loading = true
      getBuyLogList(this.pages.current).then(res => {
        this.loading = false
        if(res.data.ret == 1){
          this.tableList = res.data.data.buy_record_list
          this.tableLength = this.tableList.length
          this.total = res.data.data.buy_record_sum
        }else{
          this.$message.error(res.data.msg)
        }
      }).catch(()=>{
        this.loading = false
      })
    },
    formatDate(datetime){
      return formatTimestampToDate(datetime)
    }
  },
  mounted() {
    this.handInviteList();
  }
};
</script>

<style>
.buy-log {
  width: 100%;
  height: 100%;
  padding: 20px;
}
.buy-log-h4 {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #b7b7b7;
}
</style>